<template>
  <div class="wrapper">
    <div class="wrapper__header">
      我的全部购物车{{ countList.length > 0 ? `（${countList.length}）` : "" }}
    </div>
    <div class="shop" v-if="countList.length > 0">
      <div class="shop__item" v-for="(item, index) in cart" :key="index">
        <router-link :to="`/orderConfirmation/${item.shopId}`">
          <div class="shop__item__title">{{ item.shopName }}</div>
          <div class="product__cart__item">
            <template
              v-for="(productItem, productIndex) in item.productList"
              :key="productItem._id"
            >
              <Commodity
                :show="true"
                :item="productItem"
                :product__item__img__cart="true"
                :product__item__price__cart="true"
                :number="true"
                :year="true"
                v-if="productIndex < 2 || iconlist[index]"
              />
            </template>
          </div>
        </router-link>
        <div class="more" v-if="showList[index] > 2">
          <div class="more__content" @click="handleOverShow(index)">
            共计{{ countList[index] }}件/1.4kg
            <div
              class="more__content__icon iconfont"
              v-html="!iconlist[index] ? '&#xe6b9;' : '&#xe60a;'"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="unde" v-else>购物车是空的</div>
  </div>

  <DockerPage :num="1" />
</template>

<script>
import DockerPage from "../../components/docker/Docker.vue";
import Commodity from "../../components/commodity/Commodity.vue";
import { getSettleList } from "../../components/cartCommon/commonCartEffect";
import { reactive } from "vue";

export default {
  name: "CartPage",
  components: { DockerPage, Commodity },
  setup() {
    const { cart, countList, showList } = getSettleList();
    const iconlist = reactive({});
    for (let i = 0; i <= countList.length; i++) {
      iconlist[i] = false;
    }
    const handleOverShow = (index) => {
      iconlist[index] = !iconlist[index];
    };
    return { cart, countList, showList, iconlist, handleOverShow };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: $color-f8f8;
  overflow-y: hidden;
  &__header {
    height: 0.44rem;
    background-color: $color-fff;
    text-align: center;
    line-height: 0.44rem;
    color: $content-fontcolor;
    font-size: 0.16rem;
  }
  &__content {
    padding: 0 0.18rem;
  }
}
.shop {
  position: absolute;
  top: 0.44rem;
  bottom: 0.59rem;
  left: 0;
  right: 0;
  overflow-y: scroll;
  &__item {
    margin-top: 0.16rem;
    padding: 0 0.18rem;
    a {
      text-decoration: none;
    }
    &__title {
      padding: 0.16rem 0.16rem 0.1rem;
      background-color: $color-fff;
      font-size: 0.16rem;
      color: $content-fontcolor;
      font-weight: 600;
      border-top-left-radius: 0.04rem;
      border-top-right-radius: 0.04rem;
    }
  }
}
.product__item {
  padding: 0;
  border: 0;
}
.product__cart__item {
  padding: 0 0.16rem;
  background-color: $color-fff;
  &:last-child {
    border-bottom-left-radius: 0.04rem;
    border-bottom-right-radius: 0.04rem;
  }
}
.more {
  padding: 0.16rem;
  background-color: $color-fff;
  border-bottom-left-radius: 0.04rem;
  border-bottom-right-radius: 0.04rem;
  &__content {
    height: 0.28rem;
    background-color: #f5f5f5;
    color: $color-999;
    font-size: 0.14rem;
    text-align: center;
    line-height: 0.28rem;
    &__icon {
      transform: rotate(90deg);
      display: inline-block;
      font-size: 0.18rem;
      margin-left: 0.08rem;
      transform: translateY(0.02rem);
    }
  }
}
.unde {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.22rem;
  color: $color-999;
}
</style>